<script setup lang="ts">
import { ref, getCurrentInstance, onMounted, watch, onUnmounted } from 'vue'
import { useCoinStore } from '@/store/coin';
import { ElScrollbar } from 'element-plus';
import 'element-plus/es/components/scrollbar/style/css';
import { userStore } from '@/store/user';
import router from '@/router';
import { formatNumberWithThousands } from '@/utils/utils';
interface OrderItem {
    makerPrice: string;
    tradingNum: string;
    coinName: string;
    unitName: string;
    createTime: string;
    tradingType: string;
}
const tabList = ref([
    {
        label: '最新成交',
        value: 'new',
        left: '22px'
    },
    // {
    //     label: '我的成交',
    //     value: 'order',
    //     left: '88px'
    // }
])
const activeTab = ref('new')
const instance = getCurrentInstance()
const orderList = ref<OrderItem[]>([])
const isLoading = ref<boolean>(true)
let hycurrencySocket: any
const currencyId = ref<string>('')
const connectCurrency = () => {
    if (currencyId.value) {
        hycurrencySocket.unsubscribe(currencyId.value, `/topic/history/${useCoinStore().coinInfo.name}-USDT`)
    }
    currencyId.value = Date.now().toString(36) + Math.floor(Math.random() * 1000).toString(36)
    hycurrencySocket.subscribe(currencyId.value, `/topic/history/${useCoinStore().coinInfo.name}-USDT`, (data: OrderItem[]) => {
        orderList.value = data.map(item => {
            item.makerPrice = Number(item.makerPrice).toFixed(useCoinStore().getPrice(useCoinStore().coinInfo.name)?.unitDecimals)
            item.tradingNum = Number(item.tradingNum).toFixed(useCoinStore().getPrice(useCoinStore().coinInfo.name)?.coinDecimals)
            return item
        })
        isLoading.value = false
    })
}

const loginOrRegister = (type: string) => {
    router.push(`/${type}`)
}

onMounted(() => {
})
onUnmounted(() => {
    if (hycurrencySocket) {
        hycurrencySocket.unsubscribe(currencyId.value, `/topic/history/${useCoinStore().coinInfo.name}-USDT`)
    }
})
watch(() => useCoinStore().coinInfo.name, () => {
    isLoading.value = true
    orderList.value = []
    connectCurrency()
})
watch(() => userStore().hycurrencySocket, (val) => {
    if (val) {
        if (instance) {
            hycurrencySocket = instance.appContext.config.globalProperties.$hycurrencySocket
            if (hycurrencySocket.connected) {
                connectCurrency()
            }
        }
    }
}, { immediate: true })
</script>

<template>
    <div class=" h-full">
        <div
            class="px-[16px] text-[14px] flex flex-col justify-between  border-0  border-b-[1px] border-[#ededed] border-solid dark:border-[#333b47]">
            <div class="h-[40px]  flex items-center text-[14px] font-[500] relative">
                <div @click="activeTab = item.value" v-for="item, i in tabList" :key="i"
                    :class="[activeTab === item.value ? 'text-black dark:text-[#eaebef]' : 'text-text dark:text-[#929AA5]']"
                    class=" mr-[10px] cursor-pointer h-[40px] leading-[40px] hover:text-black dark:hover:text-[#eaebef] ">
                    {{ item.label }}
                </div>
                <span :style="{ left: tabList.find(item => item.value === activeTab)?.left }"
                    class=" absolute bottom-0 w-[16px] l h-[3px] bg-primary-300"></span>
            </div>
        </div>
        <div v-show="activeTab === 'new'" class=" box-border pt-[10px] h-[calc(100%-51px)] "
            :class="[isLoading ? 'flex items-center justify-center' : '']">
            <div v-show="!isLoading"
                class="h-[24px] mb-[4px] flex items-center justify-between w-full text-[12px] text-text dark:text-[#707A8A] px-[16px] box-border">
                <div class="w-1/3">价格(USDT)</div>
                <div class="w-1/3 text-right">数量({{ useCoinStore().coinInfo.name }})</div>
                <div class="w-1/3 text-right">时间</div>
            </div>
            <ElScrollbar height="calc(100% - 28px)">
                <div v-show="!isLoading" class="h-[calc(100%-28px)] px-[16px] ">
                    <div v-for="item, i in orderList" :key="i"
                        class="h-[24px]  flex items-center justify-between w-full text-[12px] text-text">
                        <div class="w-1/3  " :class="[item.tradingType == 'BUY' ? 'text-rise' : 'text-fall']">{{
                            formatNumberWithThousands(item.makerPrice) }}</div>
                        <div class="w-1/3 text-right text-black dark:text-[#eaebef]">{{ item.tradingNum }} </div>
                        <div class="w-1/3 text-right text-black dark:text-[#eaebef]">{{ item.createTime.split(' ')[1] }}
                        </div>
                    </div>
                </div>
            </ElScrollbar>
            <Loading v-show="isLoading" />
        </div>
        <div v-show="activeTab === 'order'" class=" box-border pt-[10px] h-[calc(100%-51px)]">
            <template v-if="userStore().userInfo.token">
                <div class="flex items-center justify-center h-full flex-col">
                    <span class="iconfont icon-no-data text-[#9c9c9c] text-[40px]"></span>
                    <div class="mt-[5px] text-[#9c9c9c] text-[14px]">暂无数据</div>
                </div>
            </template>
            <div v-else class="h-full flex items-center justify-center w-full text-[14px]">
                <span class="text-primary-500 cursor-pointer"
                    @click="loginOrRegister('login')">登录</span><span>或</span><span @click="loginOrRegister('register')"
                    class="text-primary-500 cursor-pointer">立即注册</span><span>开始交易</span>
            </div>
        </div>
    </div>
</template>

<style scoped></style>